<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="con_tion">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="img_div">
          <div class="img_span">
            <img src="../assets/heima.png" alt="" />
            <span>旭东的练习</span>
          </div>
          <el-button type="info" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <!-- 侧导航 -->
        <el-aside :width="collapse?'65px':'200px'">
          <div class="collapse" @click="collapse_btn">
            | | |
          </div>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#102a4b"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened
            :collapse="collapse"
            :collapse-transition="false"
            router
            @select="Selection"
            :default-active="activeMenu"
          >

            <!-- 一级 -->
            <template v-for="item in menuList">
              <el-submenu
                v-if="item.children && item.children.length"
                :index="'/'+item.path"
                :key="item.path"
              >
                <template slot="title">
                  <i :class="iconList[item.id]"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <!-- 二级  -->
                <template v-for="it2 in item.children">
                  <el-submenu
                    v-if="it2.children && it2.children.length"
                    :index="'/'+it2.path"
                    :key="it2.path"
                  >
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{ it2.authName }}</span>
                    </template>
                    <!-- 三级菜单 -->
                    <el-menu-item
                      v-for="itemChild_Child in it2.children"
                      :index="'/'+itemChild_Child.path"
                      :key="itemChild_Child.path"
                    >
                      <i class="el-icon-menu"></i>
                      <span>{{ itemChild_Child.authName }}</span>
                    </el-menu-item>
                  </el-submenu>
                  <!-- 没有子菜单 -->
                  <el-menu-item v-else :key="it2.path + 1" :index="'/'+it2.path">
                    <i class="el-icon-menu"></i>
                    <span>{{ it2.authName }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [], // 菜单
      collapse: false, // 折叠
      iconList: {
        125: 'el-icon-user-solid',
        103: 'el-icon-s-operation',
        101: 'el-icon-s-goods',
        102: 'el-icon-info',
        145: 'el-icon-s-order'
      },
      activeMenu: ''
    }
  },
  created () {
    this.getMenulist()
    this.activeMenu = window.sessionStorage.getItem('activeMenu') || '' // 菜单栏刷新不丢失
  },
  methods: {
    // 退出
    logout () {
      window.sessionStorage.removeItem('token')
      this.$router.push('/login')
    },
    // 获取菜单栏
    async getMenulist () {
      const { data } = (await this.$axios.getMenuList()) || []
      this.menuList = data
    },
    // 菜单栏折叠
    collapse_btn () {
      this.collapse = !this.collapse
    },
    // 选择二级菜单实现高亮
    async  Selection (index) {
      if (index && index.length > 0) {
        await window.sessionStorage.setItem('activeMenu', index)
        this.activeMenu = window.sessionStorage.getItem('activeMenu') || '' // 菜单栏刷新不丢失
      }
    }
  }
}
</script>

<style lang='less' scoped>
.con_tion,
.el-container {
  height: 100%;
}
.el-header {
  background-color: #092141;
}

.el-aside {
  background-color: #102a4b;
}
.el-main {
  background-color: #dae0e9;
}
.img_div {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 20px;
  .img_span{
     display: flex;
     align-items: center;
     span{
      margin-left: 15px;
     }
  }
}
// .el-submenu .el-menu-item {
//   min-width: 199px;
// }
.collapse{
  width: 100%;
  align-items: center;
  text-align: center;
  color: #fff;
}
</style>
